import React from "react";
import {connect} from 'dva';
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Button, Input} from "antd";
import {Row, Col} from 'antd';
import {List, Typography, Divider} from 'antd';
import ProList from '@ant-design/pro-list';
import {history} from 'umi';
import {CalendarTwoTone, IdcardTwoTone, EyeTwoTone} from '@ant-design/icons';
import {Pagination} from 'antd';


// @author:lf20210822文章分类
@connect(({topics}) => ({topics}))

export default class Topics extends React.Component {
  componentDidMount() {
    this.props.dispatch({type: 'topics/fetchTopics'})
  };

  onSearch(value) {
    this.props.dispatch({
      type: 'topics/overrideStateProps',
      payload: {title: value}
    });
    this.props.dispatch({type: 'topics/fetchTopics'})
  };

  showTotal(total) {
    return `共 ${total} 条 `;
  }

  itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  }

  onPanelChange(value, mode) {
    // eslint-disable-next-line no-console
    console.log(value, mode);
  }

  onChange(pages, pageSize) {
    this.props.dispatch({
      type: 'topics/overrideStateProps',
      payload: {page: pages, size: pageSize}
    });
    this.props.dispatch({type: 'topics/paginationTopics'})
  }


  render() {
    const data = [
      {
        title: 'Ant Design Title 1',
      },
      {
        title: 'Ant Design Title 2',
      },
      {
        title: 'Ant Design Title 3',
      },
      {
        title: 'Ant Design Title 4',
      },
    ];
    const {topics} = this.props;
    const IconText = ({name, icon, text}) => (
      <span>
        {name}{React.createElement(icon, {style: {marginRight: 8}})}
        {text}
  </span>
    );
    return (
      <PageHeaderWrapper title={false}>
        <Row gutter={{xs: 8, sm: 16, md: 24}} justify="center">
          <Col span={6}>
            <List
              header='文章分类'
              itemLayout="horizontal"
              dataSource={data}
              bordered={true}
              renderItem={item => (
                <List.Item>
                  <List.Item.Meta
                    description={<a href="#">{item.title}</a>}
                    // description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                  />
                </List.Item>
              )}
            />,
          </Col>
          <Col span={14}>
            {/* 搜索框 */}
            <Card>
              <Input.Search enterButton='Search' onSearch={this.onSearch.bind(this)}/>
            </Card>
            {/* 内容 */}
            <Card>
              <ProList
                // onRow={(record) => {
                //   return {
                //     onClick: () => {
                //       history.push(`/topics/${record.id}/`);
                //     },
                //   };
                // }}
                itemLayout="vertical"
                rowKey="id"
                dataSource={topics.topics.results}
                metas={{
                  title: {
                    render: (text, record) => {
                      return (
                        <div onClick={() => history.push(`/topics/${record.id}/`)}>
                          {record.title}
                        </div>
                      )
                    }
                  },
                  // 简介
                  description: {
                    dataIndex: 'excerpt'
                    // render: () => (
                    //   <>
                    //     <Tag>语雀专栏</Tag>
                    //     <Tag>设计语言</Tag>
                    //     <Tag>蚂蚁金服</Tag>
                    //   </>
                    // ),
                  },
                  // 发布时间，浏览量，作者图标
                  actions: {
                    render: () => [
                      <IconText icon={CalendarTwoTone}
                                text="2021-06-03"
                                key="list-vertical-message"/>,
                      <IconText icon={EyeTwoTone}
                                text="156"
                                key="list-vertical-star-o"
                                twoToneColor="#eb2f96"/>,
                      <IconText icon={IdcardTwoTone}
                                text="刘飞"
                                key="list-vertical-like-o"/>,

                    ],
                  },
                  // 右侧图片
                  extra: {
                    dataIndex: 'img',
                    render: (text, record) => (
                      <img
                        width={160}
                        alt="logo"
                        src={record.img}
                      />
                    ),
                  },
                }}
              />
            </Card>
            {/* 翻页 */}
            <Card>
              <Pagination defaultCurrent={1} showTotal={this.showTotal.bind(this)} total={topics.topics.count}
                          showSizeChanger
                          showQuickJumper onChange={this.onChange.bind(this)}/>
            </Card>
          </Col>

        </Row>
      </PageHeaderWrapper>
    )
  }
}

